/*
 * 学生信息->统计
 * @Author: ice
 * @Date: 2018-09-26 15:06:15
 * @Last Modified by: ice
 * @Last Modified time: 2018-09-30 18:48:37
 */
<template>
    <div class="container stu-statistics-container">
        <el-card class="box-card">
            <div
                slot="header"
                class="clearfix card-header">
                <span>数据各渠道占比</span>
            </div>
            <div class="card-content">
                <div class="chart-title">
                    <span class="title">数据各渠道占比</span>
                    <span class="seperator">|</span>
                    <span class="num">总数量：{{ basicData && basicData.all }}</span>
                </div>
                <div
                    class="echarts-basic-wrapper"
                    id="basic" />
            </div>
        </el-card>
        <el-card class="box-card">
            <div
                slot="header"
                class="clearfix card-header">
                <span>业务数据统计：</span>
                <el-select
                    v-model="platformId"
                    @change="getPlatformInfo"
                    placeholder="请选择"
                    size="mini">
                    <el-option
                        v-for="item in platformList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                </el-select>
            </div>
            <div class="card-content platform-stat-wrapper">
                <div class="grade-wrapper">
                    <div class="chart-title">年级使用情况</div>
                    <div class="chart-wrapper">
                        <div
                            class="echart-grade"
                            id="grade" />
                        <div
                            class="echart-legend"
                            v-if="platformData">
                            <div class="echart-legend-item first">
                                <span class="name">大一</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.educate_year.e1 /platformData.educate_year.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.educate_year.e1 }}人</span>
                            </div>
                            <div class="echart-legend-item second">
                                <span class="name">大二</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.educate_year.e2 /platformData.educate_year.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.educate_year.e2 }}人</span>
                            </div>
                            <div class="echart-legend-item third">
                                <span class="name">大三</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.educate_year.e3 /platformData.educate_year.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.educate_year.e3 }}人</span>
                            </div>
                            <div class="echart-legend-item fourth">
                                <span class="name">大四</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.educate_year.e4 /platformData.educate_year.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.educate_year.e4 }}人</span>
                            </div>
                            <div class="echart-legend-item other">
                                <span class="name">其它</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.educate_year.e0 /platformData.educate_year.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.educate_year.e0 }}人</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sex-wrapper">
                    <div class="chart-title">性别占比</div>
                    <div class="chart-wrapper">
                        <div
                            class="echart-sex"
                            id="sex" />
                        <div
                            class="echart-legend"
                            v-if="platformData">
                            <div class="echart-legend-item first">
                                <span class="name">男</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.sex.s1 /platformData.sex.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.sex.s1 }}人</span>
                            </div>
                            <div class="echart-legend-item second">
                                <span class="name">女</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.sex.s2 /platformData.sex.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.sex.s2 }}人</span>
                            </div>
                            <div class="echart-legend-item other">
                                <span class="name">其它</span>
                                <span class="seperator">|</span>
                                <span class="percent">{{ (100 * platformData.sex.s0 /platformData.sex.total).toFixed() }}%</span>
                                <span class="num">{{ platformData.sex.s0 }}人</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import echarts from 'echarts';

export default {
    components: {},
    data() {
        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "学生信息管理"
                },
                {
                    title: "学生统计"
                }
            ],
            echartBasic: null,
            basicData: null,
            basicDataForEachrt: [],
            platformId: 0,
            platformList: [
                {
                    value: 0,
                    label: '全部'
                },
                {
                    value: 1,
                    label: '校园实习生'
                },
                {
                    value: 16,
                    label: '校园小B'
                },
                {
                    value: 8,
                    label: '洗衣机数据'
                }
            ],
            echartGrade: null,
            echartSex: null,
            platformData: null,
            gradeData: [],
            sexData: []
        };
    },
    created() {
        this.$store.commit("SET_HEADER", this.breadcrumbList);
        this.authResult = this.$route.meta.authResult;
    },
    mounted() {
        this.getInfo();
        this.getPlatformInfo();
    },
    methods: {
        /**
         * 获取基本统计信息
         */
        getInfo() {
            this.$post('/studata/student_statistic%5Cbase_statistic', {}, resp => {
                if (resp.code == 1) {
                    let obj = resp.data;

                    this.basicData = resp.data;
                    this.basicDataForEachrt = [obj.amb, obj.task_agent, obj.washing, obj.other];

                    if (!this.echartBasic) {
                        this.echartBasic = echarts.init(document.getElementById('basic'));
                    }
                    this.handleInitBasicEcharts();
                }
            });
        },
        /**
         * 获取平台相关统计信息
         */
        getPlatformInfo() {
            this.$post('/studata/student_statistic%5Cstatistic_by_flag', {
                user_flag: this.platformId
            }, resp => {
                if (resp.code == 1) {
                    let total = 0;

                    for (let i in resp.data.educate_year) {
                        total += resp.data.educate_year[i];
                    }

                    resp.data.educate_year.total = total;
                    total = 0;

                    for (let i in resp.data.sex) {
                        total += resp.data.sex[i];
                    }
                    resp.data.sex.total = total;
                    this.platformData = resp.data;

                    this.gradeData = [
                        {
                            name: '大一',
                            value: resp.data.educate_year.e1,
                            itemStyle: {
                                color: '#1890FF'
                            }
                        },
                        {
                            name: '大二',
                            value: resp.data.educate_year.e2,
                            itemStyle: {
                                color: '#13C2C2'
                            }
                        },
                        {
                            name: '大三',
                            value: resp.data.educate_year.e3,
                            itemStyle: {
                                color: '#2FC25B'
                            }
                        },
                        {
                            name: '大四',
                            value: resp.data.educate_year.e4,
                            itemStyle: {
                                color: '#FACC14'
                            }
                        },
                        {
                            name: '其它',
                            value: resp.data.educate_year.e0,
                            itemStyle: {
                                color: '#8543E0'
                            }
                        }
                    ];
                    this.sexData = [
                        {
                            name: '男',
                            value: resp.data.sex.s1,
                            itemStyle: {
                                color: '#1890FF'
                            }
                        },
                        {
                            name: '女',
                            value: resp.data.sex.s2,
                            itemStyle: {
                                color: '#13C2C2'
                            }
                        },
                        {
                            name: '其它',
                            value: resp.data.sex.s0,
                            itemStyle: {
                                color: '#8543E0'
                            }
                        }
                    ];
                    if (!this.echartGrade) {
                        this.echartGrade = echarts.init(document.getElementById('grade'));
                        this.echartSex = echarts.init(document.getElementById('sex'));
                    }

                    this.handleInitPlatformEcharts();
                }
            });
        },
        /**
         * 生成基本统计图表
         */
        handleInitBasicEcharts() {
            this.echartBasic.setOption({
                color: '#3aa0ff',
                grid: {
                    top: 36,
                    left: 'left',
                    right: 30,
                    bottom: 36
                },
                xAxis: {
                    type: 'category',
                    data: ['校园实习生', '校园小B', '洗衣机', '其它'],
                    axisLine: {
                        lineStyle: {
                            color: '#d9d9d9'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(0, 0, 0, 0.65)'
                    }

                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick : {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type:'dashed'
                        }
                    },
                },
                series: [{
                    data: this.basicDataForEachrt,
                    type: 'bar',
                    barWidth: 40
                }],
                tooltip: {
                    formatter: params => {
                        let percent = (100 * params.value / this.basicData.all).toFixed();

                        return `${params.name}<br>数量：${params.value}<br>占比：${percent}%`;
                    }
                }
            });
        },
        /**
         * 生成年纪和性别相关的图表
         */
        handleInitPlatformEcharts() {
            this.echartGrade.setOption({
                animation: false,
                series: [
                    {
                        type: 'pie',
                        radius: 100,
                        center: [132, '50%'],
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: this.gradeData
                    }
                ]
            });
            this.echartSex.setOption({
                animation: false,
                series: [
                    {
                        type: 'pie',
                        radius: 100,
                        center: [132, '50%'],
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data: this.sexData
                    }
                ]
            });
        }
    }
};
</script>

 <style lang="less" scoped>
.container {
    width: 100%;
    padding: 15px;
}
.el-card {
    & + .el-card {
        margin-top: 15px;
    }
}
.card-header {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    font-weight: bold;
}
.chart-title {
    line-height: 22px;
    font-weight: bold;

    .title {
        line-height: 22px;
        font-weight: bold;
    }

    .seperator {
        display: inline-block;
        margin: 0 15px;
        color: #d8d8d8;
    }

    .num {
        line-height: 22px;
        font-weight: bold;
    }
}
.echarts-basic-wrapper {
    height: 324px;
}
.platform-stat-wrapper {
    display: flex;
}
.grade-wrapper,
.sex-wrapper {
    width: 50%;

    .chart-wrapper {
        display: flex;
    }

    .echart-grade,
    .echart-sex {
        width: 264px;
        height: 322px;
        margin-left: -32px;
    }

    .echart-legend {
        padding-top: 61px;
        padding-left: 10%;
    }

    .echart-legend-item {
        position: relative;
        padding-left: 16px;
        font-size: 0;
        white-space: nowrap;

        & + .echart-legend-item {
            margin-top: 16px;
        }

        &::before {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }

        &.first {
            &::before {
                background-color: #1890FF;
            }
        }

        &.second {
            &::before {
                background-color: #13C2C2;
            }
        }

        &.third {
            &::before {
                background-color: #2FC25B;
            }
        }

        &.fourth {
            &::before {
                background-color: #FACC14;
            }
        }

        &.other {
            &::before {
                background-color: #8543E0;
            }
        }

        .name,
        .num {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, .65);
        }

        .seperator,
        .percent {
            font-size: 14px;
            line-height: 22px;
            color: rgba(0, 0, 0, .45);
        }

        .seperator {
            display: inline-block;
            margin: 0 8px;
        }

        .num {
            display: inline-block;
            margin-left: 22px;
        }
    }
}
</style>
<style lang="less">
.stu-statistics-container {
    .el-card {
        .el-card__header {
            padding-top: 15px;
            padding-bottom: 15px;
        }
        .el-card__body {
            padding: 40px 32px 0;
        }
    }
}
</style>
